<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .box {
    width: 600px;
    height: 400px;
    border: solid 1px orange;
    display: flex;
    justify-content: space-around;
    align-items: end;
    text-align: center;

  }

  .box>div {
    width: 100px;
    background-color: pink;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

  }

  .box div span {
    margin-top: -20px;
  }

  .box div h4 {
    margin-bottom: -35px;
  }
</style>

<body>

</body>

<script>
  //求数组所有元素的和及平均值
  // var arr = [2, 6, 1, 7, 4];
  // var sum = 0;
  // var p = 0;
  // for (var i = 0; i < arr.length; i++) {
  //   sum += arr[i];
  //   p = sum / arr.length;
  // }
  // console.log('数组和为' + sum);
  // console.log('数组平均值为' + p);

  //求数组最值
  // var arr1 = [2, 6, 1, 77, 52, 25, 7];
  // var max = arr1[0];
  // var min = arr1[0];
  // for (var i = 1; i < arr1.length; i++) {
  //   max < arr1[i] ? max = arr1[i] : max;
  //   min > arr1[i] ? min = arr1[i] : min;
  //   // if (max < arr1[i]) {
  //   //   max = arr1[i];
  //   // }
  //   // if (min > arr1[i]) {
  //   //   min = arr1[i];
  //   // }
  // }
  // console.log(`最大值是${max}`);
  // console.log(`最小值是${min}`);

  // //数组操作
  // let arr = ['pink', 'red', 'blue'];
  // arr[0] = 1;
  // for (var i = 0; i < arr.length; i++) {
  //   console.log(`${arr[i]}老师`);
  // }
  // let arr1 = 'm';
  // let arr2 = ['link', 'may']
  // arr.push(arr1);
  // arr.unshift(arr2);//添加到数组开头
  // delete (arr[1]);
  // console.log(arr);
  // console.log(arr.push('sd'));//输出数组长度
  // //数组筛选
  // var arr3 = [2, 0, 1, 6, 77, 0, 53, 0, 25, 7];
  // var newarr = [];
  // for (var i = 0; i < arr3.length; i++) {
  //   // if (arr3[i] >= 10) {
  //   //   newarr.push(arr3[i])
  //   // }
  //   if (arr3[i] != 0) {
  //     newarr.push(arr3[i])
  //   }
  // }
  // console.log(newarr);

  // var pp = arr3.pop();//删除最后一个元素
  // console.log(pp);
  // var ss = arr3.shift();//删除第一个元素
  // console.log(ss);
  // var ll = arr3.splice(1, 2);//从第介个索引开始删除几个元素
  // console.log(ll);

  // 数组案例：输入数据生成柱形图
  var arr = [];
  for (var i = 1; i <= 4; i++) {
    arr.push(+prompt(`请输入第${i}季度数据`));
  }
  console.log(arr);
  document.write(`<div class="box">`);
  for (let i = 0; i < arr.length; i++) {
    document.write(`
      <div style="height:${arr[i]}px">
        <span>${arr[i]}</span>
        <h4>第${i + 1}季度</h4>
      </div>
   `)
  }
  document.write(` </div>`);

  //冒泡排序（算法）

</script>

</html>